
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="stylesheet" href="../css/public_style.css"/>
    <link rel="stylesheet" href="../css/index.css">
</head>


<body>
<span class="layui-breadcrumb">
		<a><cite>当前位置：首页</cite><span class="layui-box"></span></a>
	 </span>
<div>

</div>
<div class="layui-tab-item layui-show">
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="operator main-content">
                <h4 class="main-title">
                    <img src="../frame/static/image/ping/totles.png" alt="">
                    全网信息统计
                </h4>
                <div id="htmlView">

                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="operator main-content">
                <h4 class="main-title">
                    <img src="../frame/static/image/ping/totles.png" alt="">
                    全网告警统计
                </h4>
                <ul class="main-list">
                    <li><span style="background: #2CBDAE"></span>正常</li>
                    <li><span style="background: #F7C34D"></span>掉线</li>
                    <li><span style="background: #EB623E"></span>严重</li>
                    <li><span style="background: #268DD0"></span>主要</li>
                    <li><span style="background: #6B92EF"></span>次要</li>
                    <li><span style="background: #30C2CF"></span>未知</li>
                </ul>
                <div id="main" style="width: 400px;height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="operator main-content">
                <h4 class="main-title">
                    <img src="../frame/static/image/ping/totles.png" alt="">
                    资源类型统计
                </h4>
                <div id="main-t" style="width: 100%;height:400px;"></div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="operator main-content">
                <h4 class="main-title">
                    <img src="../frame/static/image/ping/totles.png" alt="">
                    设备健康率
                </h4>
                <div class="dial-tit">当前网络健康状态：<span>良好</span></div>
                <div class="layui-row">
                    <div class="layui-col-md4 box">
                        <input id="dial-o" value="60" data-angleOffset=0 data-linecap=round>
                        <div class="bili bili-o">60%</div>
                        <div class="bili-text">设备在线率</div>
                    </div>
                    <div class="layui-col-md4 box">
                        <input id="dial-t" value="90" data-angleOffset=0 data-linecap=round>
                        <div class="bili bili-t">90%</div>
                        <div class="bili-text">设备健康率</div>
                     </div>
                    <div class="layui-col-md4 box">
                        <input id="dial-th" value="80" data-angleOffset=0 data-linecap=round>
                        <div class="bili bili-tt">80%</div>
                        <div class="bili-text">链路联通率</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!--[if lt IE 9]>
<script type="text/javascript" src="../frame/templte/template-ie.min.js"></script>
<![endif]-->
<script type="text/javascript" src="../frame/templte/template-web.js"></script>
<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../frame/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../frame/ueditor/third-party/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../frame/echarts/excanvas.js"></script>

<script type="text/javascript" src="../frame/echarts/jquery.knob.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
layui.use(['layer', 'jquery', 'fms_util', 'base64'], function () {
    layer = layui.layer,
        $ = layui.jquery,
        base64 = layui.base64,
        fmsUtil = layui.fms_util;

    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {},
        tooltip: {},
        xAxis: {
            data: ["正常", "掉线", "严重", "主要", "次要", "未知"],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#999999',
                    fontSize: '16'
                },
            },
            axisTick:{
                show: false,
                alignWithLabel:true
            },
            axisLine:{
                symbol:['none', 'arrow'],
                symbolSize:[8, 8] ,         //---箭头大小
                symbolOffset: [0, 7],
                lineStyle:{
                    color: '#ccc',
                }
            }
        },
        yAxis: {
            axisLabel: {
                textStyle: {
                    color: '#999999',
                    fontSize: '16'
                }
            },
            splitLine: {
                show: false,
            },
            axisTick:{
                show: false,
            },
            axisLine:{
                symbol:['none', 'arrow'],
                symbolOffset: [15, 15],
                lineStyle:{
                    color: '#ccc',
                }
            }
        },
        series: [{
            name: '',
            type: 'bar',
            itemStyle: {
                normal: {
                    barBorderRadius:10,
                    color: function(params) {
                        var colorList = [
                            '#2CBDAE','#F7C34D','#EB623E','#268DD0','#6B92EF','#30C2CF',
                        ];
                        return colorList[params.dataIndex]
                    },
                },
            },
            barWidth:20,
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    var pies = echarts.init(document.getElementById('main-t'));

    option = {
        series: [{
            name:'资源类型',
            type:'pie',
            radius: ['50%', '70%'],
            label: {
                normal: {
                    show: true,
                    formatter: "{b} : {c}",
                    textStyle: {
                        fontSize: '16',
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                }
            },
            data:[
                {value:720, name:'其他'},
                {value:720, name:'磁盘'},
                {value:720, name:'网络接口'},
                {value:370, name:'system'},
                {value:80, name:'IM3010'},
                {value:160, name:'处理器'},
                {value:200, name:'内存'},
                {value:200, name:'SM3028'},
                {value:240, name:'deng'},
            ],
            color: ['#9B9B9B','#268DD0','#2FBCAC','#6D92ED','#E85F3D','#F9C24B','#3FB0EC','#7FD21E','#BD0FE0']
        }]
    };

    pies.setOption(option);

    $(function() {
        $("#dial-o").knob({
            width:120,//宽度
            thickness:0.25,//厚度按百分几计算
            fgColor:'#268DD0',//前景色
            displayInput:false,//不显示input
            bgColor:'#92C7E6',//背景色
            readOnly:true,//只读
        });
    });

    $(function() {
        $("#dial-t").knob({
            width:120,//宽度
            thickness:0.25,//厚度按百分几计算
            fgColor:'#2EBCAE',//前景色
            displayInput:false,//不显示input
            bgColor:'#96DDD5',//背景色
            readOnly:true,//只读
        });
    });

    $(function() {
        $("#dial-th").knob({
            width:120,//宽度
            thickness:0.25,//厚度按百分几计算
            fgColor:'#2CBDAC',//前景色
            displayInput:false,//不显示input
            bgColor:'#99DCD5',//背景色
            readOnly:true,//只读
        });
    });
    var html = template("html-view", {
        deviceCount:20,
        alarmCount:30
    });
    $("#htmlView").html(html);
    // 全网信息统计请求
    // fmsUtil.doAjax({
    //     action: "",
    //     data: {userId: API.userId()},
    //     type: "post",
    //     success: function (data) {
    //         if (data.isSuccess) {
    //             var html = template("html-view", data.data);
    //             $("#htmlView").html(html);
    //         }else{
    //             fmsUtil.msg(data.description);
    //         }
    //     }
    // });
});

</script>


<script type="text/html" id="html-view">
<div class="layui-row totls-all-box">
<div class="totls-box totls-box-l">
    <ul>
        <!--<li style="padding-top: 0">-->
            <!--<img src="../frame/static/image/ping/Group6@2x.png" alt="">-->
            <!--<div class="totls-txt">网络总数</div>-->
            <!--<div class="totls-num">162</div>-->
        <!--</li>-->
        <li>
            <img src="../frame/static/image/ping/Group8@2x.png" alt="">
            <div class="totls-txt">全网设备数</div>
            <div class="totls-num ">{{deviceCount}}</div>
        </li>
        <!--<li>-->
            <!--<img src="../frame/static/image/ping/Group9@2x.png" alt="">-->
            <!--<div class="totls-txt">全网连接数</div>-->
            <!--<div class="totls-num ">{{onLine}}</div>-->
        <!--</li>-->
        <li>
            <img src="../frame/static/image/ping/Group15@2x.png" alt="">
            <div class="totls-txt">全网警告数</div>
            <div class="totls-num ">{{alarmCount}}</div>
        </li>
        <li>
            <img src="../frame/static/image/ping/Group16@2x.png" alt="">
            <div class="totls-txt">全网任务总数</div>
            <div class="totls-num ">{{taskCount}}</div>
        </li>
    </ul>
</div>
<div class="totls-box totls-box-r">
    <ul>
        <!--<li style="padding-top: 0">-->
            <!--<img src="../frame/static/image/ping/Group6@2x.png" alt="">-->
            <!--<div class="totls-txt">全网资源数</div>-->
            <!--<div class="totls-num">162</div>-->
        <!--</li>-->
        <li>
            <img src="../frame/static/image/ping/Group8@2x.png" alt="">
            <div class="totls-txt">掉线设备数</div>
            <div class="totls-num">{{offLine}}</div>
        </li>
        <!--<li>-->
            <!--<img src="../frame/static/image/ping/Group9@2x.png" alt="">-->
            <!--<div class="totls-txt">断开连接数</div>-->
            <!--<div class="totls-num ">{{offLine}}</div>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../frame/static/image/ping/Group15@2x.png" alt="">-->
            <!--<div class="totls-txt">未确认警告数</div>-->
            <!--<div class="totls-num">162</div>-->
        <!--</li>-->
        <li>
            <img src="../frame/static/image/ping/Group16@2x.png" alt="">
            <div class="totls-txt">异常任务数</div>
            <div class="totls-num ">{{errorTaskCount}}</div>
        </li>
    </ul>
</div>
</div>
</script>
</html>
